<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        
        
       
       
       
      
        window.onload = function(){
             //1) 创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
            var request = new XMLHttpRequest();
            //2) 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
            request.open("get","./00 data.json");
             //3) 设置响应 HTTP 请求状态变化的函数
            request.onreadystatechange = function(){
              if(request.status=== 200 && request.readyState=== 4) {
            //console.log(request.responseText)
            //console.log(request.responseXML)
             //5) 获取异步调用返回的数据
            var data = JSON.parse(request.responseText);
            //console.log(data);
              //6) 使用 JavaScript 和 DOM 实现局部刷新
              if(data.status===200){
            var cls = data.data;
            document.querySelector("h1").innerText= cls.name;
              }else{
                  console.log(data.msg);
              }
            }
            }
             //4) 发送 HTTP 请求
            request.send();
        }
    </script>
</head>
<body>
    <h1></h1>
</body>
</html>